'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback

} from 'react-native';

import ToastUtil from '../utils/toast-util';

var {Loading, EasyLoading} = require('react-native-easy-loading');
import Http from '../utils/http';
import CameraButton from '../component/comp.button-camera';

let winWidth = Dimensions.get('window').width;//屏幕宽度
let winHeight = Dimensions.get('window').height;//屏幕高度
let headImgEmpty = require('../../img/headImg_empty.png');

const BORDER_COLOR_NORMAL = '#DDD';
const BORDER_COLOR_RED = '#ff0000';
const BUTTON_BGCOLOR_ENABLE = '#FFC000';
const BUTTON_BGCOLOR_DISABLE = '#FFC000';
const BUTTON_COLOR_ENABLE = '#FFFFFF';
const BUTTON_COLOR_DISABLE = '#FFC000';

class UserInfoScene extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        this.onFileUpload.bind(this);

        this.state = {
            btn_sendVc_title: '发送验证码',
            btn_sendVc_disabled: false,
            btn_sendVc_backgroundColor: BUTTON_BGCOLOR_ENABLE,
            btn_sendVc_fontColor: BUTTON_COLOR_ENABLE,
            loading: true,
            xm: '',
            company: '',
            sfzh: '',
            birthday: '',

            xm_borderColor: BORDER_COLOR_NORMAL,
            sfzh_borderColor: BORDER_COLOR_NORMAL,
            birthday_borderColor: BORDER_COLOR_NORMAL,
            company_borderColor: BORDER_COLOR_NORMAL,

        }
    }

    onFileUpload(name, imageIndex, photoKey, url) {
        console.log('name:' + name + ";imageindex:" + imageIndex + ";photoKey:" + photoKey + ";url:" + url);
        this.setState({
            touxiang_uri: url
        });
    }

    styleInputbox() {
        return {
            flexDirection: 'row',
            marginLeft: 40,
            marginRight: 40,
            marginTop: 10,
            borderColor: this.state.borderColor,
            borderRadius: 8,
            borderWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
            height: 40
        }
    }


    xiaoguo_borderColor_normal(name_) {
        this.setState({
            [name_]: BORDER_COLOR_NORMAL,

        });
    }


    xiaoguo_borderColor_error(name_) {
        this.setState({
            [name_]: BORDER_COLOR_RED

        });
    }


    componentWillMount() {
        //EasyLoading.show('loading...',5000);
    }

    submit() {
        Promise.resolve().then(EasyLoading.show('loading...', 5000));
        let checkXm = this.state.xm;
        if (!checkXm) {
            this.xiaoguo_borderColor_error('xm_borderColor');
            ToastUtil.show('姓名不得为空');
            Promise.resolve().then(EasyLoading.dismis());
            return;
        } else {
            this.xiaoguo_borderColor_normal('mobile_borderColor');
        }

        let checkSfzh = this.state.sfzh && this.state.sfzh.length === 18;
        if (!checkSfzh) {
            this.xiaoguo_borderColor_error('sfzh_borderColor');
            ToastUtil.show('身份证号不得为空且必须有效');
            Promise.resolve().then(EasyLoading.dismis());
            return;
        } else {
            this.xiaoguo_borderColor_normal('sfzh_borderColor');
        }

        let checkCompany = this.state.company;
        if (!checkCompany) {
            this.xiaoguo_borderColor_error('company_borderColor');
            ToastUtil.show('公司不得为空');
            Promise.resolve().then(EasyLoading.dismis());
            return;
        } else {
            this.xiaoguo_borderColor_normal('company_borderColor');

        }

        Http.post_upload('saveUserInfo', this.state.mobile, {
            sfzh: this.state.sfzh,
            xm: this.state.xm,
            company: this.state.company,
            password: this.state.password,
            type: this.state.type,
            mobile: this.state.mobile,

        }).then((res) => {
            //alert('r');
            ToastUtil.show(res.returnType.resultMessage);
            Promise.resolve().then(EasyLoading.dismis());
            //alert('resultCode:'+res.returnType.resutCode);
            if (res.returnType.resultCode === '1') {
                if ('add' === type) {
                    this.props.navigation.navigate('Login');

                } else {
                    this.props.navigation.goBack();

                }

            }
            // this.props.navigation.navigate('Login');

        }).catch((error) => {
            //alert(error);
            ToastUtil.show("报错:" + error);
            Promise.resolve().then(EasyLoading.dismis());
        });


    }


    componentDidMount() {
        EasyLoading.show('loading...', 5000);
        const {params} = this.props.navigation.state;

        let {mobile, password, type} = params;
        //  ToastUtil.show('mobile'+mobile);
        this.setState({
            mobile: params.mobile,
            password: params.password,
            type: params.type
        })

        if ('add' === type) {
            EasyLoading.dismis();
        } else {
            Http.post_dataObj('userinfo', mobile, {})
                .then(res => {
                    // ToastUtil.show(res.userinfo.length);

                    if (res.userinfo && res.userinfo.length > 0) {
                        let userinfo = res.userinfo[0];
                        // ToastUtil.show('SFZH:'+userinfo.SFZH);
                        this.setState({
                            sfzh: userinfo.SFZH,
                            xm: userinfo.XM,
                            company: userinfo.COMPANY,
                            mobile: mobile,
                        });
                    }
                    EasyLoading.dismis();


                }).catch(err => {
                //请求失败
                ToastUtil.show('发送失败，错误信息:' + err);
                EasyLoading.dismis();
            })
        }
    }


    render() {
        /*if (this.state.loading) {
            return (
                <View>
                    <loading />
                </View>
            )
        } else {
            */
        return (
            <ScrollView style={styles.body}>
                <Loading/>
                <Image style={styles.topBg}
                       source={require('shequnsiweiapp/src/img/login_top_bg.png')}>
                    <View style={{
                        width: 120,
                        height: 120,
                        backgroundColor: '#ffffff',
                        borderColor: '#000000',
                        borderRadius: 60,
                        borderWidth: 1,
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <CameraButton
                            photos={[]}
                            onFileUpload={this.onFileUpload}
                            name={'touxiang'}/>
                    </View>

                </Image>


                <View style={[styles.inputBox, {borderColor: this.state.xm_borderColor}]}>
                    <Image style={styles.icon}
                           resizeMode={'contain'}
                           source={require('shequnsiweiapp/src/img/login_user.png')}/>

                    <TextInput style={styles.inputText}
                               placeholder={'真实姓名'}
                               placeholderTextColor={'#CCC'}
                               underlineColorAndroid="transparent"
                               value={this.state.xm}
                               autoCapitalize="none"//不自动大写
                               autoCorrect={false} //不自动纠正拼写
                               blurOnSubmit={true}
                               onChangeText={(text) => {
                                   this.setState({xm: text})
                               }}
                    />
                </View>


                <View style={[styles.inputBox, {borderColor: this.state.sfzh_borderColor}]}>
                    <Image style={styles.icon}
                           resizeMode={'contain'}
                           source={require('shequnsiweiapp/src/img/login_user.png')}/>
                    <TextInput style={styles.inputText}
                               placeholder={'身份证号'}
                               placeholderTextColor={'#CCC'}
                               underlineColorAndroid="transparent"
                               value={this.state.sfzh}
                               blurOnSubmit={true}

                               onChangeText={(text) => {
                                   this.setState({sfzh: text})
                               }}
                    />
                </View>


                <View style={[styles.inputBox, {borderColor: this.state.company_borderColor}]}>
                    <Image style={styles.icon}
                           resizeMode={'contain'}
                           source={require('shequnsiweiapp/src/img/login_user.png')}/>
                    <TextInput style={styles.inputText}
                               placeholder={'所在公司'}
                               placeholderTextColor={'#CCC'}
                               underlineColorAndroid="transparent"
                               value={this.state.company}
                               autoCapitalize="none"//不自动大写
                               autoCorrect={false} //不自动纠正拼写
                               blurOnSubmit={true}
                               onChangeText={(text) => {
                                   this.setState({company: text})
                               }}
                    />
                </View>

                <View style={styles.xiayibu_view}>
                    <TouchableHighlight onPress={this.submit.bind(this)} style={{flex: 1}}>
                        <Text style={{alignSelf: 'center', fontSize: 15, color: '#FFFFFF'}}>保存</Text>
                    </TouchableHighlight>
                </View>

            </ScrollView>

        )
        //}
    }

}


const styles = StyleSheet.create({
    body: {
        backgroundColor: '#FFF',
        height: winHeight,
        flex: 1,
    },
    topBg: {
        width: winWidth,
        height: winWidth / 5 * 3,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 2,

    },

    loginText: {
        fontSize: 18,
        color: '#FFF',
        position: 'absolute',
        top: 10,
    },
    headImg_out: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        borderWidth: 0,
        borderColor: '#dd2c2c',
        marginLeft: 2,
        marginRight: 2,

    },
    headImg: {
        height: 100,
        width: 100,
        borderRadius: 50,


    },
    yanzhengma_viewOut: {
        height: 40,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        marginLeft: 40,
        marginRight: 40,
        marginTop: 10,

    },
    yanzhengma_inputbox: {

        flex: 2,
        marginLeft: 0,
        marginRight: 10,
        marginTop: 0,
        marginBottom: 0,
        borderColor: '#DDD',
        borderRadius: 8,
        borderWidth: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',

    }

    , inputBox: {
        flexDirection: 'row',
        marginLeft: 40,
        marginRight: 40,
        marginTop: 10,
        borderColor: '#DDD',
        borderRadius: 8,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40
    }
    , xiayibu_view: {
        flexDirection: 'row',
        marginLeft: 40,
        marginRight: 40,
        marginTop: 5,
        borderColor: '#DDD',
        borderRadius: 15,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40,
        backgroundColor: '#0404F2',
    },
    loginHref_view: {
        flexDirection: 'row',
        marginLeft: 80,
        marginRight: 80,
        marginTop: 5,
        justifyContent: 'center',

    },
    icon: {
        height: 15,
        width: 15,
        marginLeft: 10,
        marginRight: 10,
    },
    inputText: {
        flex: 1,
        marginRight: 10,
    },
    inputTextYanzhengma: {
        flex: 3,
        marginRight: 3,

    },

    addIdPicBox: {
        marginLeft: 40,
        marginRight: 40,
        marginTop: 10,
    },
    addIdPic: {
        height: 80,
        width: 80,
        marginLeft: 12,
        marginTop: 6,
    },
    loginBtn: {
        height: 40,
        borderRadius: 8,
        backgroundColor: '#00F',
        marginRight: 40,
        marginLeft: 40,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnText: {
        fontSize: 15,
        color: '#FFF',
    },
    inputErrorView: {

        marginLeft: 60,
        marginTop: 1,
        marginBottom: 1,

    },
    inputErrorTxt: {

        color: '#DF4849'
    }
});

module.exports = UserInfoScene;